<template>
  <div class="home">
    <mapLayerShow ref="mapLayerShow" :activeComponent="activeComponent" v-show="activeComponent === 'designIndex'"></mapLayerShow>
    <weldbox v-if="activeComponent === 'weldbox'"></weldbox>
    <switchbox v-if="activeComponent === 'switchbox'"></switchbox>
    <roomplate v-if="activeComponent === 'roomplate'"></roomplate>
    <baseBreadcrumb @switch-component="handleSwitchComponent"></baseBreadcrumb>
  </div>
</template>

<script>
import mapLayerShow from './components/mapLayerShow.vue'
import { sessionStorage } from '@/deps/utils'
export default {
  components: {
    mapLayerShow,
    weldbox: () => import('../weldbox/index.vue'),
    switchbox: () => import('../switchbox/index.vue'), // 新增switchbox组件
    roomplate: () => import('../roomplate/index.vue') // 新增roomplate组件
  },
  data() {
    return {
      activeComponent: 'designIndex' // 默认显示mapLayerShow
    }
  },
  created() {
    if (!sessionStorage('breadcrumbs')) {
      sessionStorage('breadcrumbs', [{ name: 'designIndex', title: '网络资源', path: '/home' }])
    }
    this.$bus.$on('switch-component', this.changeCom)
  },
  methods: {
    changeCom(data) {
      if (data.name === this.activeComponent) return
      this.activeComponent = data.name
    },
    handleSwitchComponent(componentName) {
      this.activeComponent = componentName
    }
  }
}
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  #map {
    width: 100%;
    height: 100%;
    position: relative;
    .leaflet-right {
      display: flex;
      .leaflet-control {
        display: flex;
      }
    }
    .leaflet-right .leaflet-pm-toolbar .button-container .leaflet-pm-actions-container {
      top: 35px;
    }
    .leaflet-bottom.leaflet-right {
      display: none;
    }
  }
}
</style>
